<%-- 
    Document   : ViewClassWorkGrades
    Created on : Nov 15, 2013, 7:54:30 PM
    Author     : Mershack
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <style type="text/css">
            tr, td, table{
                border: solid 1px;
            }
              textArea{
                vertical-align: top;
            }
            
        </style>

        <script type="text/javascript">
            var prevChkbxIdCourse = "";
            var prevChkbxIdProf = "";
            //toggling for course check boxes
            function toggleCourse(chkBx) {//make sure only one checkbox is selected
                //  alert("he");
                if (prevChkbxIdCourse !== "" && prevChkbxIdCourse !== chkBx.id) {
                    document.getElementById(prevChkbxIdCourse).checked = false;
                }

                prevChkbxIdCourse = chkBx.id;
            }

            //toggling for prof check boxes
            function toggleProf(chkBx) {

                if (prevChkbxIdProf !== "" && prevChkbxIdProf !== chkBx.id) { //do not do this on first check
                    document.getElementById(prevChkbxIdProf).checked = false;
                }
                prevChkbxIdProf = chkBx.id;
            }

            function editMode(button) {
                if (button.value === "Activate Edit Mode") {
                    document.getElementById(button.id).value = "De-activate Edit Mode";

                    //remove readOnly from textboxes
                    var textNodeList = document.getElementsByClassName("textInput");
                    for (var i = 0; i < textNodeList.length; i++) {
                        textNodeList[i].removeAttribute("readOnly");
                    }

                }

                else {
                    document.getElementById(button.id).value = "Activate Edit Mode";

                    //readOnly for all textboxes
                    var textNodeList = document.getElementsByClassName("textInput");
                    for (var i = 0; i < textNodeList.length; i++) {
                        textNodeList[i].setAttribute("readOnly", "readOnly");
                    }
                }
            }
        </script>

    </head>

    <body>
        <h3>ClassWork Section</h3>

        <input id ="editModeButton" type="button" value="Activate Edit Mode" onclick="editMode(this);" />
        <br> <br>

        <form id="inputFrm" method="post" action="ViewClassGrades">               

            <table name="professor">
                <th>Student Name</th>
                <th>Grade</th>
                <th>Comment</th>

                <c:forEach items="${grades}" var="grade">                                     

                    <tr>
                        <td>${grade.getStudent().getFullName()}
                            <input type="hidden" name="studentId" value="${student.getUserId()}">
                        </td>
                        <td><input class="textInput" type="text" readOnly="readOnly" name="pointsEarned"
                                    value="${grade.getPointsEarned()}" /></td>
                        <td>
                            <textarea rows="2" cols="20" readOnly="readOnly" name="comment" class="textInput">${grade.getComments()}</textarea>
                        </td>                         
                    </tr>     

                </c:forEach>

            </table>
            <!-- leave some spaces between the table and the submit button -->
            <br> <br><br>

            <input type="submit" value="Save all Feedbacks" />


        </form>


    </body>
</html>
